<!--
 * @Description: 身份发行-列表
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-08
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="名称">
            <a-input v-model:value="searchParam.identityName" placeholder="请输入模板名称" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="类型">
            <a-select v-model:value="searchParam.identityTemplateType" style="width: 100%" placeholder="请选择类型" :options="typeOptions" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="状态">
            <a-select v-model:value="searchParam.identityStatus" style="width: 100%" placeholder="请选择状态" :options="statusOptions" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">身份发行</span>
        <a-button type="primary" @click="addIdentity()">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建身份凭证
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'updateTime'">
            {{ new Date(+record.updateTime).toLocaleString() }}
          </template>
          <template v-if="column.key === 'identityStatus'">
            <a-tag v-if="record.identityStatus === 0" color="success">发行</a-tag>
            <a-tag v-if="record.identityStatus === 1" color="error">已删除</a-tag>
            <a-tag v-if="record.identityStatus === 2" color="warning">草稿</a-tag>
          </template>
          <template v-if="column.key === 'identityTemplateType'">
            <span>{{ record.identityTemplateType === 0 ? '个人模板' : record.identityTemplateType === 1 ? '设备模板' : '--' }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <span>
              <a @click="addIdentity(record.id)">详情</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除该条记录?" ok-text="确定" cancel-text="取消" @confirm="deleteId(record)">
                <a href="#">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import type { SelectProps } from 'ant-design-vue'
  import { message } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestDeleteIdentity, requestGetPageIdentityList } from '/@/api/business/identity'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  /** 模板类型 */
  const typeOptions = ref<SelectProps['options']>([
    { label: '个人', value: 0 },
    { label: '设备', value: 1 },
  ])
  /** 模板类型 */
  const statusOptions = ref<SelectProps['options']>([
    { label: '发行', value: 0 },
    // { label: '已删除', value: 1 },
    { label: '草稿', value: 2 },
  ])

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    identityName: '',
    identityTemplateType: null,
    identityStatus: null,
  })

  /** 表格列配置 */
  const columns = [
    { title: '名称', dataIndex: 'identityName' },
    { title: '状态', dataIndex: 'identityStatus', key: 'identityStatus' },
    { title: '模板类型', dataIndex: 'identityTemplateType', key: 'identityTemplateType' },
    { title: '更新时间', dataIndex: 'updateTime', key: 'updateTime' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetPageListTypes.IRequest, GetPageListTypes.IResponse[]>(searchParam, requestGetPageIdentityList)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.identityName = ''
    searchParam.identityTemplateType = null
    searchParam.identityStatus = null
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 新增/编辑
   */
  const addIdentity = (id?: string) => {
    router.push({
      path: '/idmanage/publish/edit',
      query: { id },
    })
  }

  const deleteId = async (record) => {
    const { responseCode } = await requestDeleteIdentity({
      id: record.id,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success('删除身份成功')
    }
    search()
  }
</script>

<style lang="less" scoped></style>
